<template>
  <div id="banner">
    <el-carousel
      :height="bannerHeight + 'px'"
      :width="bannerWidth + 'px'"
      Autoplay=""
    >
      <el-carousel-item v-for="(item, index) in arr" :key="index" class="box">
        <a :href="item.url" target="_blank">
          <div class="imgbox">
            <img :src="item.img" class="img1" />
          </div>
          <p class="text">{{ item.text }}</p>
        </a>
      </el-carousel-item>
    </el-carousel>
    <div class="rightbot">
      <span @click="toadvertise()">广告</span>
      <span class="el-icon-close" @click="fguanbi()" ref="guanbi"> </span>
    </div>
  </div>
</template>

<script>
export default {
  name: "Banner",
  data() {
    return {
      arr: [
        {
          img: "https://lupic.cdn.bcebos.com/20210629/31261794_14.jpg",
          text: "初级编程学习",
          url: "https://www.baidu.com/s?ie=utf-8&wd=%E5%88%9D%E7%BA%A7%E7%BC%96%E7%A8%8B%E5%AD%A6%E4%B9%A0&tn=91014121_cpr&nwd=&rsv_lu=1&fenlei=pgwV5H00UMwYTjYk0APC5ykdgLK10Zwd5gRzrH03rjms0Znqnhm3njDkPvf3rH7bPW6zP6KYUHYzPWb1P104PW00mvmqnfKzmWYs0Akdpvbqn6KWUMw85HbknjDYnHckgvPsT6K1TL0qnfK1TL0z5HD0IZws5HD0UZN15H9brH79uANbnhPWPAfvn100UZN1IjYvnHFhnhfzm6K_IyPY5Hmknhm1Pj0k0Zwbpyfq0ZPWuHYL0A7sT7q1pyfq0Akdgv-bm1dMX6KWI7qYpgfq0APYgvP9IjY0mLwxUA7B5fKYTh7buHDqn0KYTh7buHcqn0KBThfq0AdbUjY0uZws5HD0mywWUA71T1Ys0ZIG5Hf0uMPWpAdb5Hc0IAfqnWbsrj6vn0KWIMFk5Hc3nWT3Pjn0pA79mL0qP10s0Auz5Hc30ZPz5HczP6KBugP_5HR0UZNLIZcqnWnkPHb4rjb3rj6sP10sP1f1P0K-XZKGujYznjfsnWuxnW0YnHTk0ZNzUjdCIZwsTzR1fiRzwBRzwMILIzRzwg9GmyPCIyu9UhT-nbNWUvY-nbuzuyPGTAR-nbmknjfYP1fLrHT-nbm0",
        },
        {
          img: "https://lupic.cdn.bcebos.com/20210629/18461366_14.jpg",
          text: "跨境电商 ERP",
          url: "https://www.baidu.com/s?ie=utf-8&wd=%E8%B7%A8%E5%A2%83%E7%94%B5%E5%95%86+erp&tn=91014121_cpr&nwd=%E8%B7%A8%E5%A2%83%E7%94%B5%E5%95%86ERP&rsv_lu=1&fenlei=pgwV5H00UMwYTjYk0APC5ykdgLK10Zwd5gRzrH03rjms0ZnqnjF-nWN9rAczrjmdnW6dmfKYUHYzPWb1P104PW00mvmqnfKzmWYs0AkdpvbqnfKWUMw85HbknjDYnHckgvPsT6K1TL0qnfK1TL0z5HD0IZws5HD0UZN15y7hnWbkujf1uhu9mW03n1c0UZN1IjYvnHFhn1NWPsK_IyPY5Hmknhm1Pym40Zwbpyfq0ZPWuHYL0A7sT7q1pyfq0Akdgv-bm1dYmsKWI7qYpgfq0APYgvP9IjY0mLwxUA7B5fKYTh7buHDqn0KYTh7buHcqn0KBThfq0AdbUjY0uZws5HD0mywWUA71T1Ys0ZIG5Hf0uMPWpAdb5Hc0IAfqnWbsrj6vn0KWIMFk5HD3P1Dvn6KCmy7WTjYzP1n10Auz5Hc30ZPz5HczP6KBugP_5HR0UZNLIZcqnHnvnWTkPW0vnHR1n1b4nHmYn6K-XZKGujYznjDLnHPxnW0Ynjcvg1csPjDLnfKdThsqpZwYTZn-nYD-nbm-nbuLILT-nbN3py7WpZNhmy4MFHF7mvqVFHFAThNWpgK-FHFAnH0Yn16sn1m4FHFA00",
        },
        {
          img: "https://lupic.cdn.bcebos.com/20210629/28225575_14.jpg",
          text: "办公室装修设计",
          url: "https://www.baidu.com/s?ie=utf-8&wd=%E5%8A%9E%E5%85%AC%E5%AE%A4%E8%A3%85%E4%BF%AE%E8%AE%BE%E8%AE%A1&tn=91014121_cpr&nwd=%E5%8A%9E%E5%85%AC%E5%AE%A4+%E8%A3%85%E4%BF%AE&rsv_lu=1&fenlei=pgwV5H00UMwYTjYk0APC5ykdgLK10Zwd5gRzrH03rjms0ZnqPH6zuj6zrycvmHcsnHNhm6KYUHYzPWb1P104PW00mvmqnfKzmWYs0AkdpvbqnsKWUMw85HbknjDYnHckgvPsT6K1TL0qnfK1TL0z5HD0IZws5HD0UZN15H0dmHbkujDvnhFWPW99mWf0UZN1IjYvnHFhn1w9PsK_IyPY5Hmknhm1PAFh0Zwbpyfq0ZPWuHYL0A7sT7q1pyfq0Akdgv-bm1dYmsKWI7qYpgfq0APYgvP9IjY0mLwxUA7B5fKYTh7buHDqn0KYTh7buHcqn0KBThfq0AdbUjY0uZws5HD0mywWUA71T1Ys0ZIG5Hf0uMPWpAdb5Hc0IAfqnWbsrj6vn0KWIMFk5HRvrH0Yn0KCmy7WTjYLrHR0uMcqnW60TLcqnWcv0AF-TvsqPfK_IgIYTWYvP1RknjRzrHRvPH0vnWR3P1Rd0AN3TA-b5HcsPj0zP-tznjfdPH9xnW0LP1D40ZNzUjdCIZwsTzR1fiRzwBRzwMILIzRzwg9GmyPCIyu9UhT-nbNWUvY-nbuzuyPGTAR-nbmknj0YPjcknWD-nbm0",
        },
      ],
      bannerHeight: 230,
      bannerWidth: 280,
      screenWidth: 0,
    };
  },
  methods: {
    fguanbi() {
      this.$refs.guanbi.parentNode.parentNode.remove();
    },
  },
};
</script>

<style scoped lang="scss">
.el-carousel {
  box-sizing: border-box;
  overflow: hidden;
  border: 1px solid #eee;
  text-align: center;
  width: 280px;
}
#banner {
  width: 280px;
  position: relative;
}

.box {
  width: 280px;
  height: inherit;
  cursor: pointer;
  overflow: hidden;
}
// .el-carousel__indicator.el-carousel__indicator--horizontal.is-active {
//   display: none;
// }
.el-carousel__indicator >>> .el-carousel__button {
  width: 10px !important;
  // display: none;
  background-color: #ccc;
}
.imgbox {
  width: 100%;
  height: 200px;
  overflow: hidden;
  text-align: center;
  .img1  {
    width: 100%;
    height: 200px;
    transition: all 0.5s;
  }
  &:hover .img1 {
    width: 320px;
    height: 230px;
    margin-left: -20px;
    margin-top: -15px;
  }
}

.text {
  font-size: 15px;
  padding: 5px;
}

.rightbot {
  z-index: 10;
  position: absolute;
  right: 2px;
  bottom: 32px;
  padding: 2px 2px 0 4px;
  display: flex;
  font-size: 12px;
  height: 16px;
  line-height: 16px;
  background-color: rgb(223, 217, 217, 0.8);
  color: #777;
  cursor: pointer;
  .el-icon-close {
    font-size: 13px;
    line-height: 16px;
  }
}
</style>